<template>
  <div :class="prefixCls">
    <div
      :class="[
        `${prefixCls}-left`,
        {
          [`${prefixCls}-disabled`]: !onPrev,
        },
      ]"
      @click.prevent.stop="
        (e) => {
          onPrev && onPrev();
        }
      "
    >
      <a-icon name="fanhui"></a-icon>
    </div>
    <div
      :class="[
        `${prefixCls}-right`,
        {
          [`${prefixCls}-disabled`]: !onNext,
        },
      ]"
      @click.prevent.stop="
        (e) => {
          onPrev && onNext();
        }
      "
    >
      <a-icon name="jinru"></a-icon>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "ImagePreviewArrow",
  props: {
    onPrev: {
      type: Function,
      default: void 0,
    },
    onNext: {
      type: Function,
      default: void 0,
    },
  },
  setup() {
    const prefixCls = "arco-image-preview-arrow";

    return {
      prefixCls,
    };
  },
});
</script>
